<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="ok"><i class="layui-icon layui-icon-ok"></i></button>
</script>
<script type="text/html" id="user-img">
    <div class="user-info-head">
        <img src="{{d.url}}" width="30px" height="30px" alt="">
    </div>
</script>
{include file="_Fragment/javascript" /}
<script>
    var type = '{$type}';
    layui.use(['table', 'form', 'jquery','common'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let cols = [
            [
                {
                    title: '名称',
                    field: 'name',
                    align: 'center',
                },
                {
                    title: '图标',
                    field: 'url',
                    align: 'center',
                    templet: '#user-img'
                },
                {
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width:'10%'
                }
            ]
        ]

        table.render({
            elem: '#user-table',
            url: '/Category/getIconList',
            page: {layout:['count', 'prev', 'page', 'next', 'skip']},
            limit: 5,
            cols: cols,
            //skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter'],
        });
        form.on('submit(user-query)', function(data) {
            table.reload('user-table', {
                where: data.field
            })
            return false;
        });


        table.on('toolbar(user-table)', function(obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        table.on('tool(user-table)', function(obj) {
            if (obj.event === 'ok') {
                window.ok(obj);
            }
        });

        window.ok = function(obj) {
            layer.confirm('确定选择该图标吗?', {icon: 3, title:'提示'}, function(){
                if (type==2){
                    parent.$('#icon_thumb1').val(obj.data.url);
                    parent.$('#thumb-icon-thumb1').html('<img src="'+ obj.data.url + '" />');
                }else if (type==3){
                    parent.$('#icon_thumb3').val(obj.data.url);
                    parent.$('#thumb-icon-thumb3').html('<img src="'+ obj.data.url + '" />');
                }else {
                    parent.$('#icon_thumb').val(obj.data.url);
                    parent.$('#thumb-icon-thumb').html('<img src="'+ obj.data.url + '" />');
                }

                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        }


        window.refresh = function(param) {
            table.reload('user-table');
        }
    })
</script>
</body>
</html>
